<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 1.引入 elemntui样式 我这里引用的是远程的，需要联网-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
<!-- 用id=app 指明vue作用域-->
<div id="app">

    <div>
        <div>作业详情</div>
        <el-divider></el-divider>
        <el-checkbox label="1.点击删除按钮，弹出警告框(询问是否确定),如果选择确定则消息提示删除成功"></el-checkbox>
        <el-button type="danger" @click="del">删除</el-button>
        <el-divider></el-divider>
        <el-checkbox label="2.在输入框中,写一个数字，计算它的位数和,输入:123 输出:6 因为1+2+3=6"></el-checkbox>
        <br>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="tempNumber" placeholder="请输入数字,例如123"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="cal">计算</el-button>
            </el-form-item>
        </el-form>

        <el-divider>
        </el-divider>
    </div>

</div>
<!-- 2.引入 vue.js -->
<script src="js/vue.js"></script>
<!-- 3.引入 axios 异步请求工具 -->
<script src="js/axios.js"></script>
<!-- 4.引入 elemntui相关的js,处理响应特效的 我这里引用的是远程的，需要联网 -->
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>

<script>
    //固定语法，new Vue({}) 在大括号里面写代码
    new Vue({
        //5.指明vue作用域  <div id="app"></div>
        el: '#app',
        //6.数据区
        data() {
            return {
                tempNumber: '',
                imgFlag: false,
                user: {
                    name: '',
                    psw: ''
                },
                currentPage: 1,
                tableData: ''



            }
        },
        //7.钩子函数之一，create表示vue启动时就会运行。一启动就会运行。
        created() {

        },
        //8.所有的方法都会在这里
        methods: {
            //1.删除
            del() {
                this.$confirm('确定删除吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            }


    })
</script>
</body>
</html>